<template>
  <div>我是兄弟组件2</div>
  <button @click="number++">组件2按钮</button>
  <brother3
    :wer="wer"
    :qer="qer"
    :ter="ter"
    @tems="tems"
    @wers="wers.value"
    @tes="tes"
    :number="tenme.nubme"
  ></brother3>
  <div @click="wer.value = 50000">{{ wer }}=100</div>
  <div @click="handlewers">{{ qer }}=200</div>
  <div @click="ter = 80000">{{ ter }}=300</div>
  <div @click="tenme.nubme = 1320">{{ tenme.nubme }}</div>
</template>

<script setup>
import brother3 from "./brother3.vue";
import { ref, inject, watchEffect, watch, reactive } from "vue";
const eventBus = inject("eventBus");
const tenme = reactive({ nubme: 50 });
const number = ref(0);
let ter = ref(40);
let qer = 60;
let wer = reactive({ value: 10 });
const tems = () => {
  console.log(wer.value);
};
const wers = () => {
  console.log(qer);
};
const tes = () => {
  console.log(ter.value);
};

const handlewers = () => {
  qer = 10000;
  alert(qer);
};
eventBus.on("brother", (val) => {
  alert(val);
});
//下面两种效果是一样的，watch加immediate:true就相当于watchEffect,这种情况推荐用watchEffect
// watchEffect(() => {
//   console.log(11)
//   eventBus.emit("brothers", number.value);
// });
watch(
  number,
  (nVal, oVal) => {
    console.log(nVal, oVal, "4566");
    eventBus.emit("brothers", nVal);
  },
  { immediate: true }
);
</script>

<style scoped></style>
